<template>
  <div>
    <section class="data_section">
      <header class="section_title">数据统计</header>
      <el-row
        :gutter="20"
        style="margin-bottom: 10px;"
      >
        <el-col :span="4">
          <div class="data_list today_head"><span class="data_num head">当日数据：</span></div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{newChartData.newUsers}}</span> 新增用户</div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{newChartData.newEquipments}}</span> 新增绑定设备</div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{newChartData.newTests}}</span> 新增测试次数</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="data_list all_head"><span class="data_num head">总数据：</span></div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{totalChartData.totalUsers}}</span> 注册用户</div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{totalChartData.totalEquipments}}</span> 绑定设备</div>
        </el-col>
        <el-col :span="4">
          <div class="data_list"><span class="data_num">{{totalChartData.totalTests}}</span> 测试次数</div>
        </el-col>
      </el-row>
    </section>
    <homeChart
      :sevenDay='sevenDay'
      :sevenData='sevenData'
    ></homeChart>
  </div>
</template>

<script>
// import homeChart from "../components/homeChart";
// import { fetchHomeChart } from "@/api/getData";
// import dtime from "time-formater";
export default {
  data() {
    return {
      sevenDay: [],
      sevenData: [],
      newChartData: {
        newEquipments: "",
        newTests: "",
        newUsers: ""
      },
      totalChartData: {
        totalEquipments: "",
        totalTests: "",
        totalUsers: ""
      }
    };
  },
  components: {
    // headTop,
    // homeChart
  },
  mounted() {
    this.getHomeChartData();
    for (let i = 6; i > -1; i--) {
      const date = dtime(new Date().getTime() - 86400000 * i).format(
        "YYYY-MM-DD"
      );
      this.sevenDay.push(date);
    }
  },
  computed: {},
  methods: {
    async initData() {},
    async getHomeChartData() {
      let homeChartData = await fetchHomeChart();
      if (homeChartData.status == "200") {
        this.sevenData = homeChartData.data;
        this.newChartData.newEquipments = homeChartData.data[0].newEquipments;
        this.newChartData.newTests = homeChartData.data[0].newTests;
        this.newChartData.newUsers = homeChartData.data[0].newUsers;
        this.totalChartData.totalEquipments =
          homeChartData.data[0].totalEquipments;
        this.totalChartData.totalTests = homeChartData.data[0].totalTests;
        this.totalChartData.totalUsers = homeChartData.data[0].totalUsers;

        const apiArr = [[], [], []];
        homeChartData.data.forEach(item => {
          apiArr[0].unshift(item.newUsers);
          apiArr[1].unshift(item.newEquipments);
          apiArr[2].unshift(item.newTests);
        });
        this.sevenData = apiArr;
      }
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  .all_head {
    background: #20a0ff;
  }
}
.wan {
  .sc(16px, #333);
}
</style>
